<template>
  <div class="app-container" style="height: 100%">
    <div
      class="app-container-inner"
      style="display: flex; flex-direction: column"
      v-loading="loading"
      element-loading-text="加载中..."
    >
      <div class="header">
        <div class="search">
          <el-select
            class="mr10"
            v-model="dataValue.brandId"
            :filter-method="remoteMethod"
            :loading="loading2"
            remote-show-suffix
            placeholder="商品品牌"
            @change="getList"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in brandData"
              :key="index"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <el-select
            class="mr10"
            v-model="dataValue.typeId"
            placeholder="商品分类"
            :filter-method="remoteMethod2"
            :loading="loading3"
            @change="getList"
            filterable
            clearable
            remote-show-suffix
          >
            <el-option
              v-for="(item, index) in typeData"
              :key="index"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <el-input
            v-model="dataValue.keyword"
            class="input-with-select mr5"
            @keyup.enter="codeKeyup"
            @clear="getList"
            clearable
            placeholder="批次号/创建人员"
          >
          </el-input>
          <div class="filter">
            <HButton type="primary" @click="getList">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </HButton>
            <HButton @click="clearVlaue">
              <el-icon>
                <RefreshRight />
              </el-icon>
              重置
            </HButton>
          </div>
        </div>
      </div>
      <div class="table">
        <el-table
          border
          stripe
          resizable
          :data="dataList"
          style="width: 100%; position: absolute"
          @cell-dblclick="viewDetail"
          height="100%"
        >
          <!-- 序号 -->
          <el-table-column
            show-overflow-tooltip
            type="index"
            :index="indexMethod"
            label="序号"
            width="50"
          />

          <!-- 批次名称 -->
          <el-table-column show-overflow-tooltip prop="name" label="批次名称" min-width="180" />

          <!-- 批次号 -->
          <el-table-column show-overflow-tooltip prop="code" label="批次号" min-width="150">
            <template v-slot="scope">
              <span class="color_text" @click="viewDetail(scope.row.id)">
                {{ scope.row.code }}
              </span>
            </template>
          </el-table-column>

          <!-- 批次类型 -->
          <el-table-column show-overflow-tooltip label="批次类型" width="74">
            <template v-slot="scope">
              <span v-if="scope.row.type == 1">成品</span>
              <span v-else>配件</span>
            </template>
          </el-table-column>

          <!-- 生成数量 -->
          <el-table-column show-overflow-tooltip prop="qty" label="生成数量" width="100" />

          <!-- 激活数量 -->
          <el-table-column show-overflow-tooltip prop="activaCount" label="激活数量" width="100" />

          <!-- 未激活数量 -->
          <el-table-column show-overflow-tooltip label="未激活数量" width="100">
            <template v-slot="scope">
              <span>
                {{ scope.row.qty - scope.row.activaCount }}
              </span>
            </template>
          </el-table-column>

          <!-- 创建人员 -->
          <el-table-column show-overflow-tooltip prop="createEmp" label="创建人员" width="120" />

          <!-- 创建方式 -->
          <el-table-column show-overflow-tooltip prop="codeSource" label="创建方式" width="110">
            <template #default="scope">
              <span v-if="scope.row.codeSource == 1">系统创建</span>
              <span v-if="scope.row.codeSource == 2">系统导入</span>
              <span v-if="scope.row.codeSource == 3">工单报单创建</span>
              <span v-if="scope.row.codeSource == 4">第三方系统编码</span>
            </template>
          </el-table-column>

          <!-- 创建时间 -->
          <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="128" />
        </el-table>
      </div>
      <div class="footer">
        <Pagination
          ref="paginDom"
          :list_total="total"
          @size-change="getList(false)"
          @current-change="getList(false)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref, onMounted, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { Search, RefreshRight } from '@element-plus/icons-vue'
  import { batchgetList } from '@/api/code'
  import { brandPageSelect, typePageSelect } from '@/api/goodsInfo'
  import { ElMessage } from 'element-plus'
  import _ from 'lodash'
  import HButton from '@/components/common/button/HButton.vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.snCode.batchList,
  })

  //列表序号
  const indexMethod = (index: number) => {
    return (index + 1) * 1
  }

  const router = useRouter()
  const total = ref(0)
  const paginDom = ref() // 分页dom
  const loading = ref(true)
  const loading2 = ref(false)
  const loading3 = ref(false)
  const dataValue = reactive({
    brandId: '',
    keyword: '',
    limit: 0,
    page: 0,
    typeId: '',
  })
  const dataPage = reactive({
    limit: 0,
    name: '',
    page: 0,
  })
  const dataPage2 = reactive({
    limit: 0,
    name: '',
    page: 0,
  })
  const typeData = ref(null)
  const brandData = ref(null)
  // 查看
  const viewDetail = (id) => {
    router.push({ path: `/code/batch/${id}` })
  }
  const dataList = ref(null)
  onMounted(() => {
    getList(false)
    remoteMethod('')
    remoteMethod2('')
  })
  const getList = (val) => {
    dataValue.limit = paginDom.value.size
    dataValue.page = paginDom.value.current
    batchgetList(dataValue).then((res) => {
      if (res.data.code == 20000) {
        dataList.value = res.data.data.rows
        total.value = parseInt(res.data.data.total) || 0

        if (val) {
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'success',
            duration: 4000,
          })
        }
      } else {
        if (res.data.isError)
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'error',
            duration: 4000,
          })
      }
      loading.value = false
    })
  }
  const remoteMethod = _.throttle((val: string) => {
    if (dataPage.name !== val) {
      dataPage.name = val
      getBrandPageSelect()
    }
  }, 500)

  const getBrandPageSelect = async () => {
    loading2.value = true
    const res = await brandPageSelect(dataPage)
    brandData.value = res.data.data.rows
    loading2.value = false
  }

  const remoteMethod2 = _.throttle((val) => {
    if (dataPage2.name !== val) {
      dataPage2.name = val
      getTypePageSelect()
    }
  }, 500)

  const getTypePageSelect = async () => {
    loading3.value = true
    const res = await typePageSelect(dataPage2)
    typeData.value = res.data.data.rows
    loading3.value = false
  }
  const codeKeyup = () => {
    if (dataValue.keyword) {
      getList(true)
    } else {
      ElMessage({
        showClose: true,
        message: '请输入关键词搜索',
        duration: 4000,
      })
    }
  }
  const clearVlaue = () => {
    dataValue.brandId = null
    dataValue.keyword = ''
    dataValue.typeId = null
  }

  onMounted(() => {
    getBrandPageSelect()
    getTypePageSelect()
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
